<template>
  <div>
    <el-button type="primary" size="small" @click="addNewClick" v-show="showAdd">新增</el-button>
    <el-drawer
      :visible.sync="dialog"
      direction="rtl"
      :with-header="false"
      ref="drawer"
      size="700px"
    >
      <div style="margin:20px">
        <el-form label-position="right" label-width="130px" :inline="true" :rules="rules" :model="form" ref="form" :disabled="disabled">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="所属项目:" style="width:100%" prop="projectName" required>
                <el-select v-model="form.projectName" clearable placeholder="所属项目..." class="form-inputB" @change="getProjectId" size="small">
                  <el-option-group :key="group.label" :label="group.label" v-for="group in projectList">
                    <el-option v-for="item in group.projectList"
                      :key="item.projectId"
                      :label="item.projectName"
                      :value="item.projectName"></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块:" style="width:100%" prop="moduleId" required >
                <el-cascader
                v-model="form.moduleId"
                :options="moduleList"
                :props="{label:'moduleName', value: 'moduleId', children: 'children'}"
                clearable
                placeholder="所属模块..."
                size="small"
                class="form-inputB">
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="开发负责人:" style="width:100%" prop="devPersion" required>
                <el-select v-model="form.devPersion" placeholder="请选择" class="form-inputB" size="small">
                  <el-option v-for="item in devUserList" :key="item.userId" :label="item.userName" :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="测试负责人:" style="width:100%" prop="testPerson" required>
                <el-select v-model="form.testPerson" placeholder="请选择" class="form-inputB" size="small">
                  <el-option v-for="item in testUserList" :key="item.userId" :label="item.userName" :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="计划完成版本:" style="width:100%" prop="vesrion" required>
                <el-select v-model="form.vesrion" placeholder="请选择活动区域" class="form-inputB" size="small">
                  <el-option v-for="item in versionList" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划投产时间:" style="width:100%">
                <el-date-picker v-model="form.commission" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="计划开发开始时间:" style="width:100%">
                <el-date-picker v-model="form.devStart" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划开发结束时间:" style="width:100%">
                <el-date-picker v-model="form.devEnd" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="任务分解:" style="width:100%" prop="decomposition" required>
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.decomposition" style="width:520px" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="任务详细描述:" style="width:100%" prop="describe" required>
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.describe" style="width:520px" size="small">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注:" style="width:100%">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remarks" style="width:520px" size="small">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="float:right;margin-right:10px" v-show="isView">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm('form')" :loading="loading">
            {{ loading ? '提交中...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { addTask, editTask } from '@/api/task'
  export default {
    name: "PopVue",
    props: ['role'],
    data() {
      let checkProjectName = (rule, value, callback) => { !value?callback(new Error('请选择项目')):callback()}
      let checkDevPersion = (rule, value, callback) => { !value?callback(new Error('请选择开发人员')):callback()}
      let checkTestPersion = (rule, value, callback) => { !value?callback(new Error('请选择测试人员')):callback()}
      let checkVesrion = (rule, value, callback) => { !value?callback(new Error('请选择版本')):callback()}
      let checkDecomposition = (rule, value, callback) => { !value?callback(new Error('请输入任务分解')):callback()}
      let checkDescribe = (rule, value, callback) => { !value?callback(new Error('请输入任务详情描述')):callback()}
      let checkProjectModule = (rule, value, callback) => {
        if (typeof(value.length) === 'undefined') {
          callback(new Error('请选择所属模块'))
        } else {
          callback()
        }
      }
      return {
        dialog: false,
        loading: false,
        flag: true,
        isView: true,
        showAdd: true,
        versionList: [],
        projectList: [],
        baseProjectList: [],
        userList: [],
        devUserList: [],
        testUserList: [],
        moduleList: [],
        disabled: false,
        form: {
          taskId: '',
          projectName: '',
          projectId: '',
          testPerson: '',
          vesrion: '',
          devPersion: '',
          commission: '',
          devStart: '',
          devEnd: '',
          adjustStart: '',
          decomposition: '',
          describe: '',
          selfTest: '',
          remarks: '',
          group: '',
          moduleId: ''
        },
        timer: null,
        rules: {
          projectName: [{ validator: checkProjectName, trigger: 'blur' }],
          moduleId: [{ validator: checkProjectModule, trigger: 'blur' }],
          devPersion:  [{ validator: checkDevPersion, trigger: 'blur' }],
          testPerson:  [{ validator: checkTestPersion, trigger: 'blur' }],
          vesrion:  [{ validator: checkVesrion, trigger: 'blur' }],
          decomposition:  [{ validator: checkDecomposition, trigger: 'blur' }],
          describe: [{ validator: checkDescribe, trigger: 'blur' }]
        }
      };
    },
    methods: {
      addNewClick() {
        this.flag = true
        this.dialog = true
        this.getParentData()
        this.projectList.length>0?this.form.projectName=this.projectList[0].projectList[0].projectName:console.log('项目列表为空，请先维护项目')
        this.getProjectId()
        this.isView = true
      },
      editShowView(row) {
        this.dialog = true
        this.flag = false
        this.getParentData()
        this.form.taskId = row.taskId
        this.form.projectId = row.projectId
        this.initModuleList(row.projectId)
        this.form.testPerson = row.testPerson
        this.form.devPersion = row.devPerson
        this.form.projectName = row.projectName
        this.form.moduleId = row.moduleId
        this.form.vesrion = row.completeVersion
        this.form.commission = row.commission
        this.form.devStart = row.devBegin
        this.form.devEnd = row.devEnd
        this.form.adjustStart = row.realBegin
        this.form.adjustEnd = row.realEnd
        this.form.decomposition = row.decomposition
        this.form.describe = row.describe
        this.form.selfTest = row.self
        this.form.remarks = row.remarks
        this.isView = true
      },
      readOnly(row) {
        this.editShowView(row)
        this.isView = false
      },
      getParentData() {
        this.form.group = this.$parent.$parent.popData.group
        this.versionList = this.$parent.$parent.versionList
        this.projectList = this.$parent.$parent.projectList
        this.userList = this.$parent.$parent.popData.userList
        this.baseProjectList = this.$parent.$parent.popData.projectList
        this.devUserList = []
        this.testUserList = []
        this.userList.length>0?this.userList.forEach(element=>{element.role==="leader"||element.role==="developer"?this.devUserList.push(element):this.testUserList.push(element)}):console.log("用户列表为空，请先维护组内用户")

      },
      initModuleList(projectId) {
        this.moduleList = []
        for (let i=0; i<this.baseProjectList.length; i++) {
          if (projectId===this.baseProjectList[i].projectId) {
            this.moduleList = this.baseProjectList[i].modules
          }
        }
      },
      getProjectId() {
        for (let index = 0; index < this.baseProjectList.length; index++) {
          if (this.form.projectName===this.baseProjectList[index].projectName) {
            this.form.projectId = this.baseProjectList[index].projectId
            this.moduleList = this.baseProjectList[index].modules
            if (this.baseProjectList[index].modules.length>0) {
              this.form.moduleId = this.baseProjectList[index].modules[0].moduleId
            }
          }
        }
      },
      submitForm(formName) {
        // this.getProjectId()
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            this.disabled = true
            this.sleep(800).then( _ => {
              this.flag?
              addTask(this.form).then(response => {
                if (response === 4000) {
                  return
                }
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                this.loading = false
                this.disabled = false
                this.$parent.$parent.handleClickSerach()
              }):
              editTask(this.form).then(response => {
                if (response === 4000) {
                  return
                }
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.loading = false
                this.disabled = false
                this.$parent.$parent.handleClickSerach()
                this.dialog = false
              })
            })
          }
        });
      },
      sleep(time) {
        return new Promise((resolve) => {
          setTimeout(resolve, time)
        });
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      }
    },
    mounted() {
      if (this.role === 'developer') {
        this.showAdd = false
      }
    }
  }

</script>

<style>
.el-form-item__content{
  margin-left:0 !important;
}
.form-inputA{
      width: 520px;
}
.form-inputB{
      width: 178px;
}
</style>
